<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
    <script>
         $(function (){
             $("#tab").datagrid({
                   title:"用户列表",//标题
                   iconCls:"icon-save",//小图标
                   url:"/test/getData",//远程数据地址
                   columns:[[ //列属性
                       {field:"id",title:"主键",width:200,align:"center"},
                       {field:"name",title:"名称",width:200,align:"center"},
                       {field:"flag",title:"状态",width:200,align:"center",formatter:function (value,row,index){
                               console.log(value);
                               console.log(row);
                               console.log(index);
                               return value==1?"<font color='green'>启用</font>":"<font color='red'>禁用</font>";
                       }},
                       {field:"vname",title:"vo名称",width:200,align:"center",formatter:function (value,row,index){
                                  return row!=null && row.vo!=null?row.vo.vname:"";
                           }},
                       {field:"vid",title:"vo名称id",width:200,align:"center",formatter:function (value,row,index){
                               return row!=null && row.vo!=null?row.vo.vid:"";
                           }}

                   ]],
                  singleSelect:true,//开启单选
                  pagination:true,//开启分页
                  toolbar:"#querytool"//工具栏
             });
         });

         function query(){
             /*$("#tab").datagrid("load",{
                 "name":$("#name").textbox("getValue")
             })*/

            /* $("#tab").datagrid("reload",{
                 "name":$("#name").textbox("getValue")
             });*/

             console.log($("#tab").datagrid("getSelected"));
         }


    </script>
</head>
<body>
   <table id="tab"></table>
   <div id="querytool">
       <input type="text" class="easyui-textbox" id="name"/>
       <a id="btn" href="javascript:query()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
   </div>
</body>
</html>